<template>
  <div class="container">
    <div class="noAccount" v-show="noAccount">
      <el-row class="noDataInfo">
        <img src="../../../static/img/noDataInfo.png" alt="" />
      </el-row>
      <el-row class="payOffInfoCancel">
        <p>尚未设置工资专户</p>
      </el-row>
    </div>
    <div class="accountCard" v-show="yesAccount">
      <p class="labelWidth">代发工资</p>
      <p class="accountTotal">￥{{ bankActPay || '0' }}</p>
      <p class="accountBank">
        <span class="labelWidth">专户银行：</span>
        <span class="information">{{ bankName || '--' }}</span>
      </p>
      <p>
        <span class="labelWidth">专户账号：</span>
        <span class="information">{{ accountId || '--' }}</span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'salaryAccountDetail',
  props: ['companyId'],
  data() {
    return {
      bankActPay: '',
      bankName: '',
      accountId: '',
      // isAccount: '' //0 无专户  1有专户
      noAccount: false,
      yesAccount: false,
    }
  },
  created() {
    //获取专户详情数据
    this.getAccountInfo()
  },
  mounted() {},
  methods: {
    getAccountInfo() {
      this.axios({
        method: 'post',
        url: 'api-su/companyaccount/base/findbycomid',
        data: {
          companyId: this.companyId,
          type: 'NC_BANK_TYPE',
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            var data = response.data.result
            if (!data.accountId) {
              this.noAccount = true
            } else {
              this.yesAccount = true
            }
            this.bankActPay = data.bankActPay
            this.bankName = data.bankName
            this.accountId = data.accountId
          } else {
            this.$message({
              type: 'error',
              message: response.data.errorMsg,
            })
          }
        })
        .catch((error) => {
          this.$message.error('数据获取失败')
        })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  padding: 44px;
  .noAccount {
    padding-top: 60px;
    text-align: center;
    color: #666666;
    .noDataInfo {
      margin-top: 16px;
    }
  }
  .accountCard {
    width: 427px;
    min-height: 239px;
    padding: 28px;
    color: #fff;
    background: url('../../../static/img/salary/accountDetail.png') no-repeat;
    background-size: 100% 100%;
    .labelWidth {
      font-size: 14px;
      color: #ffffff;
      line-height: 32px;
    }
    .accountTotal {
      padding-bottom: 20px;
      font: 40px/50px Microsoft YaHei;
      border-bottom: 1px solid #fff;
    }
    .accountBank {
      padding-top: 15px;
    }
  }
}
</style>
